<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单计算器操作</title>
</head>
<body>
  <input type="text" id="i1">
  <input type="text" id="i2">
  <input type="button" value="加" onclick="fun(1)">
  <input type="button" value="减" onclick="fun(2)">
  <input type="button" value="乘" onclick="fun(3)">
  <input type="button" value="除" onclick="fun(4)">
  <div>结果:</div>

  <script type="text/javascript">
    // 获取文本输入框以及DIV对象
    var i1 = document.querySelector("#i1");
    var i2 = document.querySelector("#i2");
    var d = document.querySelector("div");

    function fun(num) {
      // 判断输入的内容是否合法(只能输入数字)
      if (isNaN(i1.value) || isNaN(i2.value)) {
        d.innerText = "请输入正确的数字！";
        return; // 余下的代码不执行
      }
      switch (num) {
        case 1 : // 加
              //alert(d.innerText); // d.innerText后面没有值 表示取值
                //i1.value 表示获取input标签的value值 默认的结果是字符串
              d.innerText = "结果:" + (Number(i1.value) + Number(i2.value));
              break;
        case 2 :
            d.innerText = "结果:" + (Number(i1.value) - Number(i2.value));
            break;
        case 3 :
            d.innerText = "结果:" + (Number(i1.value) * Number(i2.value));
            break;
        case 4 :
            d.innerText = "结果:" + (Number(i1.value) / Number(i2.value));
            break;
      }
    }
  </script>
</body>
</html>